<template>
    <div id="recharge">
      <header>
        <i @click="goBack()"></i>
        <div>充值</div>
      </header>
      <img src="../../image/pic_recharge.png" alt="" width='154'>
      <p>请您输入要充值的金额</p>
      <input type="text" placeholder="￥" v-model="obj.amount">
      <a href='javascript:;' class="recharge" @click="recharge">充值</a>
      <div class='mc' v-show='showMc'>
        <div>
          <img src="../../image/no_wifi@2x.png" width='150' alt="">
          <p>网络不稳定，请再刷新试试！</p>
        </div>
      </div>
  
  
      <!--  支付类型选择 -->
      <div class='mc1' v-show='isdocType' @click.stop='isdocType=false'>
        <div class='duration' @click.stop='isdocType=true'>
          <div class='top'>
            <a @click.stop='isdocType=false'>取消</a>
            <a @click.stop='sureDocType'>确定</a>
          </div>
          <mt-picker :slots="slotsDocType" :valueKey="'numbering'?'numbering':''" @change="onValuesChangeDocType"></mt-picker>
        </div>
      </div>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          showMc: false,
          obj: {
            user_id: '',
            amount: ''
          },
          isdocType: false, //是否显示就诊类型选择
          // order_num: '', //订单号
          id: '',
          charge: '',
          slotsDocType: [{
            values: ['微信', '支付宝'],
            className: 'slot1',
            textAlign: 'center'
          }, ],
        }
      },
      components: {
  
      },
      methods: {
        // 支付类型选择
        onValuesChangeDocType(picker, values) {
          this.valuesDocType = values[0];
        },
        sureDocType() {
          if (this.valuesDocType == '微信') {
            this.isdocType = false;
            this.$api.post(this.$api.baseURLSchool, "/ali_recharge", this.obj, r => {
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
              if (r.data.ret == 1) {
                const data = {
                  order_num: r.data.ordernum,
                  total_fee: this.obj.amount,
                  des: '充值'
                };
                this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
                  var params = {
                    partnerid: r.data.mch_id, // merchant id 
                    prepayid: r.data.prepay_id, // prepay id 
                    noncestr: r.data.nonce_str, // nonce 
                    timestamp: r.data.timestamp, // timestamp 
                    sign: r.data.sign, // signed string 
                  };
                  Wechat.sendPaymentRequest(params, function () {
                    this.$utils._toast('支付成功');
                  }, function (reason) {
                    this.$utils._toast(reason);
                  });
                }, err => {
                  console.log(err);
                }, false, false)
              }
            }, err => {
              console.log(err);
            })
  
  
          } else if (this.valuesDocType == '支付宝') {
            //   支付宝支付
            this.isdocType = false;
            this.$api.post(this.$api.baseURLSchool, "/ali_recharge", this.obj, r => {
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
              if (r.data.ret == 1) {
                const data = {
                  order_num: r.data.ordernum,
                  subject: '充值',
                  amount: this.obj.amount,
                };
                this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
                  var params = r.data.data;
                  cordova.plugins.alipay.payment(params, function () {
                    this.$utils._toast('支付成功');
                  }, function (reason) {
                    this.$utils._toast(reason);
                  });
                }, err => {
                  console.log(err);
                }, false, false)
              }
            }, err => {
              console.log(err);
            })
          }
        },
        goBack() {
          this.$router.push({
            path: '/myAccount'
          })
        },
        //登陆拦截
        isLogin() {
          this.userid = localStorage.getItem("loginMobile");
          if (!this.userid) {
            this.$router.push({
              name: 'login1'
            })
            return false;
          } else {
            return true;
          }
        },
        recharge() {
          this.obj.user_id = localStorage.getItem("loginMobile");
          if (this.obj.amount == '') {
            this.$utils._toast('请输入需充值金额');
            this.isdocType = false;
          } else {
            this.isdocType = true;
          }
        },
      },
    }
  
  </script>
  <style lang="scss" scoped>
    .mc1 {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      z-index: 99;
  
      .duration {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 235px;
        background: #fff;
  
        div.top {
          display: flex;
          height: 45px;
          line-height: 45px;
          background: linear-gradient(to right, #54a589, #68c6a5);
          padding: 0 25px;
  
          a {
            flex: 1;
            font-size: 14px;
            color: #fff;
  
            &:last-child {
              text-align: right;
            }
          }
        }
      }
    }
  
  </style>
  